<template>
  <el-dialog
    title="积分支入记录"
    :visible.sync="exchangeRecordFlag"
    width="65%"
    :close-on-click-modal="false"
    :before-close="handleClose"
    center
  >
    <page-table :loading="loading" :data="dataSource" :columns="columns" :options="options" />
    <pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="handleList"
    />
  </el-dialog>
</template>

<script>
export default {
  name: 'exchangeRecordDialog',
  props: {
    exchangeRecordFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      options: {
        select: false,
        border: true,
        index: false
      },
      dataSource: [],
      platformObj: {
        2: '好物特工',
        4: '酒馆长',
        8: '挖咖',
        16: '机咖',
        32: '秦宗',
        64: '机甲通'
      },
      columns: [
        {
          prop: 'amount',
          label: '积分值',
          render: (h, { row }) => {
            return <div>{row.amount || 0}</div>
          }
        },
        {
          label: '积分类型',
          render: () => {
            return <div>支入</div>
          }
        },
        {
          label: '到账状态',
          render: () => {
            return <div>已到账</div>
          }
        },
        {
          prop: 'availableBalance',
          label: '账户余额',
          render: (h, { row }) => {
            return <div>{row.availableBalance || 0}</div>
          }
        },
        {
          prop: 'description',
          label: '积分描述',
          render: (h, { row }) => {
            return <div>礼品卷使用兑换码获得</div>
          }
        },
        {
          prop: 'platform',
          label: '积分来源',
          render: (h, { row }) => {
            return <div>{this.platformObj[row.platform]}</div>
          }
        },
        {
          prop: 'createdTime',
          label: '时间',
          render: (h, { row }) => {
            return <div>{row.createdTime || '暂无'}</div>
          }
        }
      ],
      userId: '',
      platform: '',
      transactionType: ''
    }
  },
  methods: {
    initData(userId, platform, transactionType) {
      this.userId = userId
      this.platform = platform
      this.transactionType = transactionType
      this.handleList()
    },
    //获取列表
    async handleList() {
      const params = {
        ...this.listQuery,
        userId: this.userId,
        changeType: 50,
        platform: this.platform,
        transactionType: this.transactionType
      }
      const {
        data: { records, total }
      } = await this.$http.integral.integralSettlementApi.getIntegralList(params)
      this.total = total
      this.dataSource = records
    },
    //关闭弹窗
    handleClose() {
      this.$emit('update:exchangeRecordFlag', false)
    }
  }
}
</script>

<style scoped></style>
